{extend name="public:common_index" /}

{block name="main"}
<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <h2 style="text-align: center;font-size: xx-large; color: #65CEA7;margin-top: 50px">欢迎来到哈尼后台管理系统</h2>
    </div>
</div>

<div class="page-container">
    <table class="table table-border table-bordered table-bg">
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-2">
                <blockquote>
                    <h3>数据概览</h3>
                </blockquote>
            </div>
        </div>

        <div class="row cl" style="padding-left: 50px">
            <div class="col-xs-10 col-sm-4 text-c" style="width: 25%;text-align: center" >
                <a class="card" href="{:url('user/index')}">
                    <div class="card-content center-align" style="color: #ff9800 !important;">
                        <span class="icon"><i class="fa fa-users fa-5x"></i></span>
                        <h5 class="userNum" ></h5>
                    </div>
                    <div class="card-action orange white-text">
                        用户数
                    </div>
                </a>
            </div>
            <div class="col-xs-8 col-sm-4 text-c" style="width: 25%;text-align: center">
                <div class="card">
                    <div class="card-content center-align" style="color: #E57373 !important">
                        <span class="icon"><i class="fa fa-shopping-cart fa-5x"></i></span>
                        <h5 class="orderNum"></h5>
                    </div>
                    <div class="card-action cyan white-text center-align">
                        订单数
                    </div>
                </div>
            </div>
            <div class="col-xs-8 col-sm-4 text-c" style="width: 25%;text-align: center">
                <div class="card">
                    <div class="card-content center-align" style="color: #E57373 !important">
                        <span class="icon"><i class="fa fa-jpy fa-5x"></i></span>
                        <h5 class="orderCount"></h5>
                    </div>
                    <div class="card-action cyan white-text center-align">
                        已完成订单总金额
                    </div>
                </div>
            </div>
            <div class="col-xs-8 col-sm-4 text-c" style="width:25%;text-align: center">
                <div class="card">
                    <div class="card-content text-lighten-2 center-align" style="	color: #00bcd4 !important">
                        <span class="icon"><i class="fa fa-comments fa-5x"></i></span>
                        <h5 class="commentsNum"></h5>
                    </div>
                    <div class="card-action red lighten-2 white-text center-align">
                        意见反馈
                    </div>
                </div>
            </div>
        </div>
        <!--<div style="display: none">-->
            <!--<h5 class="orderDate"></h5>-->
            <!--<div class="orderPaid" ></div>-->
        <!--</div>-->
        <div class="row">
            <div class="form-label col-xs-4 col-sm-9">
                <blockquote>
                    <h3>用户统计</h3>
                </blockquote>
            </div>
        </div>

        <div class="row" style="padding-left: 50px">
            <div class="col-xs-8 col-sm-6 text-c" style="width: 50%">
                <div class=" card-panel userData" style="height: 400px">

                </div>
            </div>
            <div class="col-xs-8 col-sm-5 text-c" style="width: 40%">
                <div class="row">
                    <div class="col s12">
                        <div class=" card-panel audit" style="height: 200px;">

                        </div>
                    </div>
                    <div class="col s12">
                        <div class=" card-panel skill" style="height: 200px;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-label col-xs-8 col-sm-9">
                <blockquote>
                    <h3>订单统计</h3>
                </blockquote>
            </div>
        </div>

        <div class="row" style="padding-left: 50px">
            <div class="col-xs-8 col-sm-9 text-c">
                <label class="form-label col-xs-2 col-sm-4"></label>
                <div id="monthChart" class="card-panel" style="height: 400px">

                </div>
            </div>
        </div>
    </table>
</div>
<!--body wrapper end-->
{/block}

{block name="js"}
<script src="__PUBLIC__/echarts/echarts.common.min.js"></script>
<script>

/*charts init*/
var userData = {};
userData.charts = echarts.init(document.getElementsByClassName("userData")[0]);
userData.charts.showLoading();
var auditData = {};
auditData.charts = echarts.init(document.getElementsByClassName("audit")[0]);
auditData.charts.showLoading();
var skillData = {};
skillData.charts = echarts.init(document.getElementsByClassName("skill")[0]);
skillData.charts.showLoading();

var monthChart = {};
monthChart.charts = echarts.init(document.getElementById("monthChart"));
monthChart.charts.showLoading();

data = {$data};
console.log(data);
loadOverview(data);
createCharts(data);


function loadOverview(data) {
document.getElementsByClassName("userNum")[0].innerText = data.all_member_count;
document.getElementsByClassName("orderNum")[0].innerText = data.all_order_count;
document.getElementsByClassName("commentsNum")[0].innerText = data.all_member_count;
document.getElementsByClassName("orderCount")[0].innerText = data.orderCount;
// document.getElementsByClassName("orderPaid")[0].innerText = data.order_paid;
// document.getElementsByClassName("orderDate")[0].innerText = data.order_date;
}

function createCharts(data) {
/*用户数量*/
userData.num = {
total: data.all_member_count,
merchant: data.all_member_count,
manager: data.all_member_count,
other: data.all_member_count
}
userData.option = {
    title: {
    text: '用户',
    subtext: '总数：' + userData.num.total,
    x: 'center'
},

tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},

legend: {
    orient: 'vertical',
    left: 'left',
    data: ['贵族', 'VIP', '普通用户']
},
series: [{
name: '用户数量',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: userData.num.merchant,
name: '贵族'
}, {
value: userData.num.manager,
name: 'VIP'
}, {
value: userData.num.other,
name: '普通用户'
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
userData.charts.hideLoading();
userData.charts.setOption(userData.option);

/*身份审核*/
auditData.num = {
    total: data.id_count,
    completed: data.passed_id_count,
    uncompleted: data.untreated_id_count,
    failed: data.rejected_id_count
}
auditData.option = {
title: {
text: '身份审核',
subtext: '总数：' + auditData.num.total,
x: 'left',
y: 'top'
},

tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},

legend: {
orient: 'vertical',
x: 'right',
y: 'bottom',
data: ['已认证', '待审核', '未通过']
},
series: [{
name: '用户数量',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: auditData.num.completed,
name: '已认证'
}, {
value: auditData.num.uncompleted,
name: '待审核'
}, {
value: auditData.num.failed,
name: '未通过'
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
auditData.charts.hideLoading();
auditData.charts.setOption(auditData.option);

/*技能审核*/
skillData.num = {
total: data.skill_count,
completed: data.passed_skill_count,
uncompleted: data.untreated_skill_count,
failed: data.rejected_skill_count
}
skillData.option = {
title: {
text: '技能审核',
subtext: '总数：' + skillData.num.total,
x: 'left',
y: 'top'
},

tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},

legend: {
orient: 'vertical',
x: 'right',
y: 'bottom',
data: ['已认证', '待审核', '未通过']
},
series: [{
name: '用户数量',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: skillData.num.completed,
name: '已认证'
}, {
value: skillData.num.uncompleted,
name: '待审核'
}, {
value: skillData.num.failed,
name: '未通过'
}],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
skillData.charts.hideLoading();
skillData.charts.setOption(skillData.option);

/*订单数据*/
monthChart.num = {
month_order_count: data.month_order_count,
month_order_money: data.month_order_money
};
monthChart.option = {
title: {
text: '本年度订单统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['订单数', '订单总额']
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '订单数',
type: 'bar',
data: monthChart.num.month_order_count,
barMaxWidth: 36,
label: {
normal: {
show: true,
position: 'top'
}
}
}, {
name: '订单总额',
type: 'bar',
data: monthChart.num.month_order_money,
barMaxWidth: 36,
label: {
normal: {
show: true,
position: 'top'
}
}
}],
color: ['#f8b139', '#ed6335']
};
monthChart.charts.hideLoading();
monthChart.charts.setOption(monthChart.option);
}

</script>
{/block}
